<template>
	<div class='wy-main matching-waybill'>
		<a-row class="wy-main-title">
			<a-col :span="24">
				<p class="title-p">
					<a-divider class="title-vertical"  type="vertical" />
					<span class="title-span" >创建运单</span>
					<a-divider class="title-divider"  />
				</p>
			</a-col>
		</a-row>
		<a-row>
			<a-col :span="22" class="tip-top">
				<h6><span>小提示：</span>（打 <span>* </span>号为必填项）</h6>
				<ul>
					<li>①、在线开单、打单、货物追踪、员工管理、车辆管理、客户管理、财务对账等，让您的管理更加方便、快捷！更多功能请申请WTMS管理系统</li>
					<li>②、如需了解更多详情，请咨询：400-010-5656。</li>
				</ul>
			</a-col>
		</a-row>

		<a-row>
			<a-col :span="22" class="a-row-form">
				<a-form :form="form" @submit="handleSubmit" class="a-form" layout="horizontal">
					<!-- 第二行 -->
					<a-row type="flex" justify="center" align="middle" class="a-row-2">
						<a-col :span="6">
							<a-form-item label="始发/到达" :label-col="{ span: 8}" :wrapper-col="{ span: 16 }">
								<a-input defaultValue="北京市-北京市-朝阳区" v-decorator="[
          '始发/到达',
          {rules: [{ required: true, message: 'Please input your note!' }]}
        ]" />
							</a-form-item>
						</a-col>
						<a-col :span="6">
							<a-form-item label="——>" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }">
								<a-input aria-placeholder="请选择到达地" v-decorator="[
          '——>',
          {rules: [{message: 'Please input your note!' }]}
        ]" />
							</a-form-item>
						</a-col>
						<a-col :span="2">
							<a-form-item>
								<a-radio :style="radioStyle" :value="1">中转运单</a-radio>
							</a-form-item>
						</a-col>
						<a-col :span="7">
							<a-form-item label="原单" :label-col="{ span: 8}" :wrapper-col="{ span: 12 }">
								<a-input />
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="发货方发货人" :label-col="{ span: 6 }" :wrapper-col="{ span: 18}">
								<a-input style="width:35%" v-decorator="[
          '发货方发货人',
          {rules: [{required: true,message: 'Please input your note!' }]}
        ]" />
								<a-button type="primary" style="margin-left:15px">选择添加常用发货人</a-button>
							</a-form-item>

							<a-form-item label="发货方手机/电话" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
								<a-input v-decorator="[
          '发货方手机/电话',
          {rules: [{required: true,message: 'Please input your note!' }]}
        ]" />
							</a-form-item>
							<a-form-item label="发货方地址" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
								<a-input v-decorator="[
          '发货方地址',
          {rules: [{message: 'Please input your note!' }]}
        ]" />
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="接货方收货人" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
								<a-input style="width:35%" v-decorator="[
          '接货方收货人',
          {rules: [{required: true,message: 'Please input your note!' }]}
        ]" />
								<a-button type="primary" style="margin-left:15px">选择添加常用收货人</a-button>
							</a-form-item>

							<a-form-item label="接货方手机/电话" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
								<a-input v-decorator="[
          '接货方手机/电话',
          {rules: [{required: true,message: 'Please input your note!' }]}
        ]" />
							</a-form-item>
							<a-form-item label="接货方地址" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
								<a-input v-decorator="[
          '接货方地址',
          {rules: [{message: 'Please input your note!' }]}
        ]" />
							</a-form-item>
						</a-col>
					</a-row>
					<!-- 第二行结束 -->
					<!-- 第三行开始 -->
					<a-row class="a-row-3">
						<a-col>
							<div class="route_choice">
								<table border="0" cellspacing="" cellpadding="0" style="text-align: center; border: 1px solid #eee;border-right:none">
									<tr style="background: #eee; height: 50px;">
										<th width="150">货物名称</th>
										<th width="150">包装</th>
										<th width="200">件数</th>
										<th width="260">重量</th>
										<th width="200">体积(m³)</th>
										<th width="260">计费方式</th>
										<th width="200">注意事项</th>
										<th width="200">操作</th>
									</tr>
									<tr style="height: 50px;">
										<td>
											<a-input v-decorator="['note']" style="width: 60%;" />
											<a-divider type="vertical" />
										</td>
										<td>
											<a-input v-decorator="['note']" style="width: 60%;" />
											<a-divider type="vertical" />
										</td>
										<td>
											<a-input v-decorator="['note']" style="width: 60%;" />
											<a-divider type="vertical" />
										</td>
										<td>
											<a-input v-decorator="['note']" style="width: 40%;" />
											<a-select defaultValue="male" v-decorator="[ 'gender']" style="width: 40%;">
												<a-select-option value="male"> 千克 </a-select-option>
												<a-select-option value="female"> 吨 </a-select-option>
											</a-select>
											<a-divider type="vertical" />
										</td>
										<td>
											<a-input v-decorator="['note']" style="width: 60%;" />
											<a-divider type="vertical" />
										</td>
										<td>
											<a-input v-decorator="['note']" style="width: 40%;" />
											<a-select defaultValue="male" v-decorator="[ 'gender']" style="width: 40%;">
												<a-select-option value="male"> /千克 </a-select-option>
												<a-select-option value="female"> /吨 </a-select-option>
												<a-select-option value="female"> /立方 </a-select-option>
												<a-select-option value="female"> /件数 </a-select-option>
											</a-select>
											<a-divider type="vertical" />
										</td>
										<td>
											<a-select defaultValue="male" v-decorator="[ 'gender']" style="width: 60%;">
												<a-select-option value="male"> 请选择 </a-select-option>
												<a-select-option value="female">三超货物类 </a-select-option>
												<a-select-option value="female"> 易碎易损类 </a-select-option>
												<a-select-option value="female"> 无规则包装类</a-select-option>
											</a-select>
											<a-divider type="vertical" />
										</td>
										<td>
											<!-- <a-button size="small" type="primary">重置</a-button>&nbsp;&nbsp;&nbsp;&nbsp; -->
											<a style="margin-right: 20px;">重置</a>
										</td>
									</tr>
									<tr style="height: 50px;line-height:50px;">
										<td colspan="8" align="right">
											<a-icon type="plus-square" />
											<a style="margin-right: 50px;">增加一行</a>
										</td>
									</tr>
								</table>
							</div>
						</a-col>
					</a-row>

					<!-- 第三行结束 -->
					<!-- 第四行 -->
					<a-row class="a-row-4">
						<a-col :span="22">
							<h6>运费说明（单位：元）</h6>
							<a-row>
								<a-col :span='8'>
									<a-form-item label="长途运费" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
										<a-input v-decorator="[
          '长途运费',
          {rules: [{ required: true,message: 'Please input your note!' }]}
        ]" />
									</a-form-item>
								</a-col>
								<a-col :span='8'>
									<a-form-item label="装卸费" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
										<a-input />
									</a-form-item>
								</a-col>
								<a-col :span='8'>
									<a-form-item label="上楼费" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
										<a-input />
									</a-form-item>
								</a-col>
								<a-col :span='8'>
									<a-form-item label="包装费" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
										<a-input />
									</a-form-item>
								</a-col>
								<a-col :span='8'>
									<a-form-item label="垫付费" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
										<a-input />
									</a-form-item>
								</a-col>
								<a-col :span='8'>
									<a-form-item label="其他费用" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
										<a-input />
									</a-form-item>
								</a-col>
								<a-col :span='8'>
									<a-form-item label="业务提成" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
										<a-input />
									</a-form-item>
								</a-col>
								<a-col :span='8'>
									<a-form-item label="声明价值" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
										<a-input />
									</a-form-item>
								</a-col>
								<a-col :span='5'>
									<a-form-item label="保价费" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
										<a-input />
									</a-form-item>
								</a-col>
								<a-col :span='3'>
									<a-form-item style="text-align:left;" label="费率" :label-col="{ span: 6 }" :wrapper-col="{ span: 6 }">
										<a-input addonAfter="‰" />
									</a-form-item>
								</a-col>
								<a-col :span='8'>
									<a-form-item label="提货费" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
										<a-input />
									</a-form-item>
								</a-col>
								<a-col :span='8'>
									<a-form-item label="送货费 " :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
										<a-input />
									</a-form-item>
								</a-col>

							</a-row>
						</a-col>
					</a-row>
					<!-- 第四行结束 -->
					<!-- 第五行 -->
					<a-row class="a-row-5">
						<a-col :span="22">
							<h6>代收货款（单位：元）</h6>
							<a-row>
								<a-col :span='12'>
									<a-form-item label="代收货款" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
										<a-input />
									</a-form-item>
								</a-col>
								<a-col :span='12'>
									<a-form-item label="代收手续费率:" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
										<a-input style="width:90%" /> ‰
									</a-form-item>
								</a-col>
								<a-col :span='2'>
									<a-form-item label="还款方式" style="textAlign: right">
									</a-form-item>
								</a-col>
								<a-col :span='4'>
									<a-form-item>
										<a-radio-group name="radioGroup" :defaultValue="1">
											<a-radio :value="1">银行</a-radio>
											<a-radio :value="2">现金</a-radio>
											<a-radio :value="3">支付宝</a-radio>
										</a-radio-group>
									</a-form-item>

								</a-col>
								<a-col :span='4' v-if="isbank">
									<a-form-item label="开户人" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
										<a-input style="width:90%" />
									</a-form-item>
								</a-col>
								<a-col :span='4' v-if="isbank">
									<a-form-item label="开户行" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
										<a-input style="width:90%" />
									</a-form-item>
								</a-col>
								<a-col :span='4' v-if="isbank">
									<a-form-item label="银行账号:" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }">
										<a-input style="width:90%" />
									</a-form-item>
								</a-col>
								<a-col :span='4' v-if="!isbank">
									<a-form-item label="真实姓名:" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
										<a-input style="width:90%" />
									</a-form-item>
								</a-col>
								<a-col :span='4' v-if="!isbank">
									<a-form-item label="支付宝账号:" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
										<a-input style="width:90%" />
									</a-form-item>
								</a-col>

							</a-row>
						</a-col>
					</a-row>
					<!-- 第五行结束 -->

					<!-- 第六行 -->
					<a-row class="a-row-6">
						<a-col :span="22">
							<div style="paddingTop:10px;paddingLeft:40px;">
								<span>合计： 0元 </span>&nbsp;&nbsp;&nbsp;收款方式：
								<a-select defaultValue="male" v-decorator="[ 'gender']" style="width: 15%;">
									<a-select-option value="male">现付（发货人）</a-select-option>
									<a-select-option value="female">提付（收货人） </a-select-option>
									<a-select-option value="female"> 回单付</a-select-option>
									<a-select-option value="female"> 月结</a-select-option>
									<a-select-option value="female">欠付</a-select-option>
								</a-select>
								&nbsp;&nbsp;&nbsp;送货方式：
								<a-radio-group name="radioGroup" :defaultValue="1">
									<a-radio :value="1">自提</a-radio>
									<a-radio :value="2">送货</a-radio>
								</a-radio-group>
								是否回单：
								<a-radio-group name="radioGroup" :defaultValue="1">
									<a-radio :value="1">是</a-radio>
									<a-radio :value="2">否</a-radio>
								</a-radio-group>
								份数：
								<a-input style="width:30px" /> 份
							</div>
							<div style="paddingTop:10px;">
								<a-form-item label="运单备注:" :label-col="{ span: 2 }" :wrapper-col="{ span: 12 }">
									<a-textarea :rows='1' />
								</a-form-item>
							</div>
						</a-col>
					</a-row>
					<!-- 第六行结束 -->
					<a-row>
						<a-col style="textAlign:center;marginTop:30px;">
							<a-button type="primary" html-type="submit">提交</a-button>
							<a-button type="primary" html-type="submit">提交并打印</a-button>
						</a-col>
					</a-row>
				</a-form>
			</a-col>

		</a-row>

	</div>
</template>
<script>
	export default {
		data() {
			return {
				isbank: true,
				radioStyle:'',
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		created() {},
		components: {
			// Footer
		},
		watch: {},

		mounted: function() {

		},
		methods: {
			handleSubmit(e) {
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						console.log('Received values of form: ', values);
					}
				});
			},

		}
	}
</script>

<style lang="less" scoped>
	.matching-waybill {
		.tip-top {
			height: 100px;
			background: #e4f0f6;
			padding-top: 10px;
			h6 {
				padding-left: 40px;
				span {
					color: #e0330b;
				}
			}
			ul {
				list-style: none;
			}
		}
		.a-row-form {
			margin-top: 20px;
			background-color: #fff;
			.a-form {
				background-color: #fff;
			}
			.a-row-1 {
				height: 80px;
				border: 1px solid #ccc;
			}
			.a-row-2,
			.a-row-3,
			.a-row-4,
			.a-row-5,
			.a-row-6 {
				border: 1px solid #ccc;
				margin-top: 15px;
				h6 {
					padding-left: 40px;
					margin-top: 10px;
					font-size: 16px;
					font-weight: 1000;
				}
			}
			.a-row-2 {
				padding-top: 20px;
			}
		}
	}
</style>